<template>
  <div class="total-average-radar">
    <BasicCard
      title="Radar Compare - Average"
      v-loading="isLoading"
      element-loading-text="正在加载中..."
      element-loading-background="rgba(0, 0, 0, 0.15)"
    >
      <BasicCharts 
        :option="option" 
        :carouselNum="option.series[0].data.length" 
      />
    </BasicCard>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watchEffect, reactive } from "vue";
import { storeToRefs } from "pinia";
// store
import useDataScreen from "@/store/dataScreen";

const dataScreenStore = useDataScreen();
// 解构
const { sacMap: map } = storeToRefs(dataScreenStore);

let option = ref({
  tooltip: {
    show: true,
  },
  legend: {
    data: ["TD3-LSTM", "SAC-R2N2"],
    textStyle: {
      color: '#fff'
    }
  },
  axisLine: {
    // 设置雷达图中间射线的颜色
    lineStyle: {
      color: "#c0c0c0",
    },
  },
  splitLine: {
    //网格颜色设置
    show: true,
    lineStyle: {
      width: 1,
      color: "#1e83e4",
    },
  },
  name: {
    //修改indicator文字的颜色
    textStyle: {
      color: "#4f4f4f",
    },
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: "Accuracy" },
      { name: "Energy" },
      { name: "Penalty" },
      { name: "Rewards" },
      { name: "Runtime" }
    ],
  },
  series: [
    {
      name: "Budget vs spending",
      type: "radar",
      data: [
        // {
        //   value: [4200, 3000, 20000, 35000],
        //   name: 'TD3-LSTM'
        // },
        // {
        //   value: [5000, 14000, 28000, 26000],
        //   name: 'TD3-NoLSTM'
        // }
      ],
      itemStyle: {
        //该数值区域样式设置
        // normal: {
        //   color: "rgba(255,225,0,.3)", //背景颜色，还需设置areaStyle
        //   lineStyle: {
        //     color: "rgba(255,225,0,.3)", //边框颜色
        //   },
        // },
      },
      label: {
        //显示value中具体的数值
        normal: {
          show: true,
          textStyle: {
            //更改数值样式
            color: "orange",
          },
        },
      },
      areaStyle: {
        //设置区域背景颜色透明度
        normal: {
          width: 1,
          opacity: 0.8,
        }
      }
    }
  ]
})

const initData = () => {
  // console.log("map.value", map.value);
  let data: Array<{ name: string; value: number[] }> = [];
  // TD3_LSTM
  const marksLSTM = [
    "td3_accuracy40_LSTM",
    "td3_energy40_LSTM",
    "td3_penalty40_LSTM",
    "td3_rewards_lstm",
    "td3_runtime40_LSTM"
  ];
  // SAC_R2N2
  const marksSAC = [
    "sac_accuracy40",
    "sac_energy40",
    "sac_penalty40",
    "sac_rewards",
    "sac_runtime40"
  ];

  let lstmVals = [];
  for (const str of marksLSTM) {
    const targetArr = map.value.get(str);
    const sum = targetArr.reduce(
      (accumulator, currentValue) => accumulator + currentValue,
      0
    );
    // 平均值
    lstmVals.push(sum / targetArr.length);
  }

  let sacVals = [];
  for (const str of marksSAC) {
    const targetArr = map.value.get(str);
    const sum = targetArr.reduce(
      (accumulator, currentValue) => accumulator + currentValue,
      0
    );
    // 平均值
    sacVals.push(sum / targetArr.length);
  }

  data.push(
    {
      value: lstmVals,
      name: "TD3-LSTM",
    },
    {
      value: sacVals,
      name: "SAC-R2N2",
    }
  );
  option.value.series[0].data = data;
};

let isLoading = ref(true);
onMounted(() => {
  setTimeout(() => {
    initData();
    isLoading.value = false;
  }, 3000);
});
</script>

<style scoped lang="scss">
.total-average-radar {
  height: 100%;
}
</style>
